<!DOCTYPE html>
<html>
    <style>
        .img-item {
            display: block;
            margin: 50px auto;
            height: 200px;
        }
    </style>
    <body>
        <!-- 需要将图片地址保存到一个自定义的属性上，等到要加载该图片时，再将temp-src赋给src -->
        <img src="" temp-src="../../pic/js/1.png" class="img-item" />
        <img src="" temp-src="../../pic/js/2.png" class="img-item" />
        <img src="" temp-src="../../pic/js/3.png" class="img-item" />
        <img src="" temp-src="../../pic/js/4.png" class="img-item" />
        <img src="" temp-src="../../pic/js/5.png" class="img-item" />
        <img src="" temp-src="../../pic/js/6.png" class="img-item" />
        <img src="" temp-src="../../pic/js/7.png" class="img-item" />
        <img src="" temp-src="../../pic/js/8.png" class="img-item" />
        <script src="./懒加载.js"></script>
        <script>
            window.onscroll = function(){
                loadImage();
            }
            loadImage();
        </script>
    </body>
</html>
